<template>
  <div v-if="show" class="gift-modal">
    <van-overlay :show="true" />
    <div class="popup-content">
      <img class="bg" src="@/assets/img/discount-border.png" alt="" srcset="" />
      <div class="prize-info">
        <img
          src="@/assets/img/close-1.png"
          alt=""
          class="close-icon"
          @click="closeModal"
        />
        <div class="info-content-buy">
          <div class="title">Don't go ! We offer you a big discount now!</div>
          <img :src="detail.icon" alt="" />
          <!-- <div class="text">
            Limited time promotion,<br />
            cheaper than regular purchase
          </div> -->
        </div>
        <div class="info-btn" @click="giftAction">{{ btnText }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'RecommendGiftModal',
  data() {
    return {
      show: false,
      detail: {}
    }
  },
  computed: {
    ...mapState({
      buyStatus: 'buyStatus'
    }),
    type() {
      const { type = 1 } = this.detail
      return type
    },
    btnText() {
      return [2].includes(this.type) ? 'Receive' : 'Buy'
    }
  },
  watch: {
    buyStatus(newVal) {
      if (newVal && this.show) {
        this.$store.commit('changeBuyStatus', false)
        this.closeModal()
      }
    }
  },
  created() {},
  methods: {
    showModal(data) {
      this.detail = data
      this.show = true
      return new Promise((resolve, reject) => {
        console.log(reject)
        this.callback = resolve
      })
    },
    callback() {},
    giftAction() {
      const { type, backpackId, productId } = this.detail
      if (type === 2) {
        this.getUnpacking()
      } else {
        this.$jsBridge.prizeExchange({
          productId,
          bagId: backpackId,
          type,
          h5Payment: 1
        })
      }
    },
    async getUnpacking() {
      const { backpackId } = this.detail
      const { code } = await this.$request({
        url: '/api/v2/activity/turntable/unpacking',
        params: {
          backPackId: backpackId,
          purchaseToken: ''
        }
      })
      console.log('code===', code)
      if (code === 200) {
        this.$Toast('Receive Success')
        this.callback()
        this.closeModal()
      }
    },
    closeModal() {
      const dom = document.querySelector('#trun-img')
      if (dom) {
        dom.src = ''
      }
      this.show = false
      this.$jsBridge.closePage()
    }
  }
}
</script>
<style lang="less" scoped>
.gift-modal {
  .popup-content {
    position: fixed;
    width: 90%;
    z-index: 10;
    top: 3.4rem;
    left: 5%;

    //  background: linear-gradient(180deg, #fff7e2 0%, #ffe8bb 100%);
    //background: url('@/assets/img/get-frame.png') 0 0/ 100%;
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      width: 100%;
      z-index: -1;
    }
    .prize-info {
      position: relative;
      width: 98%;
      margin: 0.7rem auto 0;
      .close-icon {
        position: absolute;
        right: -0.1rem;
        top: -0.9rem;
        width: 0.75rem;
      }

      .info-content {
        margin: 0.4rem auto 0;
        width: 98%;
        height: 3.1rem;
        border-radius: 0.3rem;
        color: #ff4111;
        font-size: 0.32rem;
        text-align: center;
        img {
          max-height: 3.1rem;
        }
      }
      .info-content-buy {
        margin: 0 auto 0;
        width: 98%;
        border-radius: 0.3rem;
        color: #ff7600;
        font-size: 0.32rem;
        text-align: center;
        img {
          max-height: 3.5rem;
        }
        .title {
          font-size: 0.38rem;
        }
        .text {
          font-size: 0.28rem;
          color: #bc2600;
          margin: -0.3rem 0 0.3rem 0;
        }
      }
      .info-btn {
        width: 3.1rem;
        height: 0.8rem;
        line-height: 0.8rem;
        background: url('@/assets/img/receive-btn.png') no-repeat 0 0/100%;
        margin: 0 auto;
        text-align: center;
        color: #fff;
        font-size: 0.32rem;
      }
    }
  }
}
</style>
